{% extends "base.html" %}

{% block title %}数据库配置 - 交易监控系统{% endblock %}

{% block head_extra %}
<style>
    .alert {
        transition: opacity 0.15s linear;
    }
    .alert-dismissible .close {
        position: absolute;
        top: 0;
        right: 0;
        padding: 0.75rem 1.25rem;
        color: inherit;
    }
    .ml-2 {
        margin-left: 0.5rem;
    }
    .mt-2 {
        margin-top: 0.5rem;
    }
    .fade.show {
        opacity: 1;
    }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <h1>数据库配置</h1>
</div>

<div class="card">
    <div class="card-header">
        <h2>数据库设置</h2>
    </div>
    <div class="card-body">
        {% if error %}
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <strong>连接错误!</strong> {{ message }}

            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        {% endif %}
        
        {% if success %}
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <strong>成功!</strong> {% if config.db_type == 'mysql' %}MySQL{% else %}SQLite{% endif %}数据库配置已更新。
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        {% endif %}
        
        {% if connection_error %}
        <div class="alert alert-warning" role="alert">
            <strong>注意:</strong> 上次连接到 {{ connection_error.type }} 数据库时发生错误: {{ connection_error.message }}
        </div>
        {% endif %}
        <form action="/database_config" method="post" id="dbConfigForm">
            <div class="form-group">
                <label for="db_type">数据库类型</label>
                <select id="db_type" name="db_type" class="form-control" required>
                    <option value="sqlite" {% if config.db_type == 'sqlite' %}selected{% endif %}>SQLite</option>
                    <option value="mysql" {% if config.db_type == 'mysql' %}selected{% endif %}>MySQL</option>
                </select>
            </div>

            <div id="sqlite_config" {% if config.db_type != 'sqlite' %}style="display: none;"{% endif %}>
                <div class="form-group">
                    <label for="sqlite_path">SQLite 数据库路径</label>
<input type="text" id="sqlite_path" name="sqlite_path" class="form-control" value="{{ config.sqlite_path or '' }}" placeholder="请输入SQLite数据库路径">
                </div>
            </div>

            <div id="mysql_config" {% if config.db_type != 'mysql' %}style="display: none;"{% endif %}>
                <div class="form-group">
                    <label for="mysql_host">MySQL 主机</label>
<input type="text" id="mysql_host" name="mysql_host" class="form-control" value="{{ config.mysql_host or '' }}" placeholder="请输入MySQL主机地址">
                </div>
                <div class="form-group">
                    <label for="mysql_port">MySQL 端口</label>
<input type="number" id="mysql_port" name="mysql_port" class="form-control" value="{{ config.mysql_port or '3306' }}" placeholder="请输入MySQL端口">
                </div>
                <div class="form-group">
                    <label for="mysql_user">MySQL 用户名</label>
<input type="text" id="mysql_user" name="mysql_user" class="form-control" value="{{ config.mysql_user or '' }}" placeholder="请输入MySQL用户名">
                </div>
                <div class="form-group">
                    <label for="mysql_password">MySQL 密码</label>
<div class="input-group">
<input type="password" id="mysql_password" name="mysql_password" class="form-control" value="{{ config.mysql_password or '' }}" placeholder="请输入MySQL密码" autocomplete="new-password">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary toggle-password" type="button">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <script>
                    document.querySelector('.toggle-password').addEventListener('click', function() {
                        const passwordField = document.getElementById('mysql_password');
                        const icon = this.querySelector('i');
                        if (passwordField.type === 'password') {
                            passwordField.type = 'text';
                            icon.classList.replace('fa-eye', 'fa-eye-slash');
                        } else {
                            passwordField.type = 'password';
                            icon.classList.replace('fa-eye-slash', 'fa-eye');
                        }
                    });
                </script>
                <div class="form-group">
                    <label for="mysql_db_name">MySQL 数据库名称</label>
<input type="text" id="mysql_db_name" name="mysql_db_name" class="form-control" value="{{ config.mysql_db_name or '' }}" placeholder="请输入MySQL数据库名称">
                </div>
            </div>

            <input type="hidden" id="theme" name="theme" value="{{ theme }}">
            <button type="submit" id="submit_btn" class="btn btn-primary">保存配置</button>
            <script>
                // 表单提交前确保密码字段值正确
                document.getElementById('dbConfigForm').addEventListener('submit', function(e) {
                    // 如果密码字段为空，但有原始值，使用原始值
                    const passwordField = document.getElementById('db_password');
                    const originalPassword = "{{ config.mysql_password or '' }}";
                    
                    if (passwordField.value === "" && originalPassword !== "") {
                        console.log("Password field is empty, using original password");
                        passwordField.value = originalPassword;
                    }

                    // 清除可能影响登录状态的 Cookie 或变量
                    document.cookie = "db_config_submitted=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
                });
            </script>
        </form>
    </div>
</div>

<script>
    // 数据库类型切换
    document.getElementById('db_type').addEventListener('change', function() {
        const dbType = this.value;
        document.getElementById('sqlite_config').style.display = dbType === 'sqlite' ? 'block' : 'none';
        document.getElementById('mysql_config').style.display = dbType === 'mysql' ? 'block' : 'none';
    });
    
    // 关闭警告框
    const closeButtons = document.querySelectorAll('.alert .close');
    closeButtons.forEach(button => {
        button.addEventListener('click', function() {
            const alert = this.closest('.alert');
            alert.style.opacity = '0';
            setTimeout(() => {
                alert.style.display = 'none';
            }, 150);
        });
    });
</script>
{% endblock %}